<template>
	<view class="page">
		<view class="inpt-unit">
			<view class="inpt-key">
				消费金额满
			</view>	
			<view class="inpt-val">
				<input type="number" placeholder="请输入消费金额满" class="inpt" v-model="enough" />
			</view>
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				优惠金额
			</view>	
			<view class="inpt-val">
				<input type="number" placeholder="请输入优惠金额" class="inpt" v-model="amount" />
			</view>
		</view>
		<!-- @click="showStartDatetime" -->
		<view class="select-unit" >
			<view class="select-key">
				起始时间
			</view>	
			<picker mode="date" @change="onStart" :value="starttime">
				<view class="select-val">
					<text class="val" :class="{'placeholder': !starttime}">{{starttime ? starttime : '请选择起始时间'}}</text>
					<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
				</view>	
			</picker>
		</view>
		<view class="select-unit">
			<view class="select-key">
				结束时间
			</view>	
			<picker mode="date" @change="onEnd" :value="endtime">
				<view class="select-val">
					<text class="val" :class="{'placeholder': !endtime}">{{endtime ? endtime : '请选择结束时间'}}</text>
					<image src="/static/msg-r.png" mode="aspectFill" class="ic"></image>
				</view>		
			</picker>
		</view>
		<view class="inpt-unit">
			<view class="inpt-key">
				发放数量
			</view>	
			<view class="inpt-val flex-row">
				<input type="number" placeholder="请输入发放数量" class="inpt" v-model="number" />
				<text class="mark">张</text>
			</view>
		</view>
		<view class="inpt-unit" style="margin-bottom: 200rpx;">
			<view class="inpt-key">
				每人限制领取数量
			</view>	
			<view class="inpt-val flex-row">
				<input type="number" placeholder="请输入每人限制领取数量" class="inpt" v-model="limit" />
				<text class="mark">张</text>
			</view>
		</view>
	</view>
	<submit-btn @submit="submit" ref="submitRef">
		<template v-slot:btns="{isSubmitted}">
			<view class="p-btn" :class="{'disabled':isSubmitted}">
				提交审核
			</view>
		</template>
	</submit-btn>
	<!-- 
	<dateTime ref="startdatetimeRef" default="start" :start="startDatetime" :end="endDatetime" @rundata="getStartDatetime" />
	<dateTime ref="enddatetimeRef" default="start" :start="startDatetime" :end="endDatetime" @rundata="getEndDatetime" />
	 -->
</template>		
<script lang="ts">
import {
  reactive,
  toRefs,
  defineComponent, 
  ref,
  // watchEffect,
} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
// import dateTime from '@/components/kx-datetime.vue';
const couponHandle = defineComponent({
	components:{
		// dateTime
	},
	props: {
	},
	setup(props: any, ctx: any) {
		const data = reactive({
			// startDatetime: '', //用于选择时间 Y-m-d H:i
			// endDatetime: '',  //前后半年
			// startTime:'',
			// endTime:'',
			// start_time:'', //时间戳
			// end_time:'',
			
			
			enough:'',
			amount:'',
			
			usetimestart:0,
			usetimeend:0,
			number:'',
			limit:'',
			
			starttime:'', //用于展示
			endtime:'',
			id:'',
		})
		// watchEffect(()=>{
		// })
		onLoad(e => {
			data.id = e.id;
			getInfo();
		});
		const getInfo = async ()=>{
			const res = await uni.$request('coupon.info',{id: data.id});
			let info = res.data;
			Object.keys(info).forEach(i=>{
				
				if(data.hasOwnProperty(i)){
					if(i==='usetimestart'){
						let usetimestart = info[i];
						data.starttime = uni.$tools.date('Y-m-d',usetimestart)
					}
					if(i === 'usetimeend'){
						let usetimeend = info[i];
						data.endtime = uni.$tools.date('Y-m-d',usetimeend)
					}
					data[i] = info[i]
				}
			})
		}
		
		const onStart = (e)=>{
			const starttime = e.detail.value;
			const filterStarttime = starttime.replace('-','/');
			data.usetimestart = new Date(filterStarttime).getTime()/1000
			data.starttime = starttime;
		}
		const onEnd = (e)=>{
			const endtime = e.detail.value;
			const filterEndtime = endtime.replace('-','/');
			data.usetimeend = new Date(filterEndtime).getTime()/1000
			data.endtime = endtime;
		}
		
		const submitRef = ref();
		const submit= async ()=>{
			if(! uni.$tools.match( data.enough,'nonull','请输入消费金额满')){
			    return;
			}
			if(! uni.$tools.match( data.amount,'nonull','请输入优惠金额')){
			    return;
			}
			
			if(! uni.$tools.match( data.usetimestart,'nonull','请选择起始时间')){
			    return;
			}
			if(! uni.$tools.match( data.usetimeend,'nonull','请选择结束时间')){
			    return;
			}
			
			if(! uni.$tools.match( data.number,'nonull','请输入发放数量')){
			    return;
			}
			if(! uni.$tools.match( data.limit,'nonull','请输入每人限制领取数量')){
			    return;
			}
			
			let sendData:any={
				enough: data.enough,
				amount: data.amount,
				
				usetimestart:data.usetimestart,
				usetimeend:data.usetimeend,
				number: data.number,
				limit: data.limit,
			}
			
			if(data.id){
				sendData.id = data.id;
			}
			const url = data.id ? 'coupon.edit' : 'coupon.add';
			let res = await uni.$request(url,sendData);
			submitRef.value.chgeStatus();
			uni.$tools.msg(res.msg);
			setTimeout(()=>{
				uni.$this.goBack();
			},800)
		}
		return {
			...toRefs(data),
			onStart,
			onEnd,
			
			submitRef,
			submit,
			
			// startdatetimeRef,
			// getStartDatetime,
			// showStartDatetime,
			
			// enddatetimeRef,
			// getEndDatetime,
			// showEndDatetime,
			
		};
	}
})
export default couponHandle;
</script>


<style lang="scss">
	page{
		background-color: #fff;
	}
	.page{
		padding-top: 30rpx;
		padding-bottom: 40rpx;
	}
	.inpt-unit{
		margin-bottom: 40rpx;
		padding: 0 30rpx;
		.inpt-key{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			
		}
		.inpt-val{
			border-bottom: 2rpx solid #eee;
			.inpt{
				font-size: 24rpx;
				color:#333;
				height: 60rpx;
				line-height: 60rpx;
				flex:1;
			}
			.mark{
				height: 60rpx;
				line-height: 60rpx;
				border-bottom: 2rpx solid #eee;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
	.select-unit{
		margin-bottom: 40rpx;
		padding: 0 30rpx;
		.select-key{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.select-val{
			border-bottom: 2rpx solid #eee;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60rpx;
			.val{
				font-size: 24rpx;
				color:#333;
			}
			.ic{
				width: 18rpx;
				height: 18rpx;
			}
		}
	}
	.p-btn{
		margin: 0 auto;
		width: 670rpx;
		height: 84rpx;
		background: #256ae5;
		border-radius: 84rpx;
		line-height: 84rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		&.disabled{
			background-color: #eee;
		}
	}
</style>